home *** CD-ROM | disk | FTP | other *** search
/ Practical Internet Web Designer 89 / PIWD89.iso / pc / CONTENTS / BONUS / FULL / wikiwriter / setup-ww2x.exe / {app} / help / tutor09.db < prev    next >
Encoding:
Text File  |  2002-09-25  |  2.3 KB  |  92 lines
  1. @@title WikiWriter Tutorial: Layout page elements with DIV
  2.  
  3. .nav WikiWriter Tutorial: ((tutor08|Prev)) | ((tutor00|Up)) | ((tutor10|Next))
  4.  
  5. .end
  6.  
  7. == Layout page elements with DIV
  8.  
  9.  
  10.  
  11. For blocks of text (and/or graphics, lists, other blocks, etc.) use DIV elements named in the CSS file. Open the DIV with a dot and the class name, and close it with a dot and "end".
  12.  
  13. <pre>
  14.  
  15. .result This is a "result" div.
  16.  
  17. .end
  18.  
  19. </pre>
  20.  
  21. .result This is a result div.
  22.  
  23. .end
  24.  
  25. The appearance and behavior of divs is specified in the CSS file. If you nest divs, you have to close with a dot-end for each div in the set:
  26.  
  27. <pre>
  28.  
  29. .plan This is a "plan" div...
  30.  
  31. .result ... holding a "result" div.
  32.  
  33. .end
  34.  
  35. .end
  36.  
  37. </pre>
  38.  
  39. .plan This is a "plan" div...
  40.  
  41. .result ... holding a "result" div.
  42.  
  43. .end
  44.  
  45. .end
  46.  
  47.  
  48.  
  49. Try it on [[b Second Page]], which isn't nearly fancy enough for today's Web standards.
  50.  
  51.  
  52.  
  53. To put the entire link list into a "result" div, put a dot and "result" on a line just before the list, and a dot and "end" on the line just after the list:
  54.  
  55. <pre>
  56.  
  57. == My second page.
  58.  
  59. .result
  60.  
  61. # Link back to ((Home)). - [[b a good place to start]]
  62.  
  63. # This link goes to the ((Third Page|next)) page. - [[rev still needs some work]]
  64.  
  65. /#
  66.  
  67. .end
  68.  
  69. </pre>
  70.  
  71.  
  72.  
  73. Now we have:
  74.  
  75. .result
  76.  
  77. == My second page.
  78.  
  79. .result
  80.  
  81. # Link back to ((Home)). - [[b a good place to start]]
  82.  
  83. # This link goes to the ((Third Page|next)) page. - [[rev still needs some work]]
  84.  
  85. /#
  86.  
  87. .end
  88.  
  89. .end
  90.  
  91.  
  92.  
  93. Not bad, but it still needs something... Let's center the heading:
  94.  
  95. <pre>
  96.  
  97. .cent
  98.  
  99. == My second page.
  100.  
  101. .end
  102.  
  103. </pre>
  104.  
  105.  
  106.  
  107. .result
  108.  
  109. .cent
  110.  
  111. == My second page.
  112.  
  113. .end
  114.  
  115. .result
  116.  
  117. # Link back to ((Home)). - [[b a good place to start]]
  118.  
  119. # This link goes to the ((Third Page|next)) page. - [[rev still needs some work]]
  120.  
  121. /#
  122.  
  123. .end
  124.  
  125. .end
  126.  
  127.  
  128.  
  129. We're getting there. One last touch - put the centered heading in a "plan" DIV (notice each DIV needs it's own ".end"):
  130.  
  131. <pre>
  132.  
  133. .plan
  134.  
  135. .cent
  136.  
  137. == My second page.
  138.  
  139. .end
  140.  
  141. .end
  142.  
  143. </pre>
  144.  
  145.  
  146.  
  147. Lovely -- a little garish, but lovely:
  148.  
  149. .result
  150.  
  151. .plan
  152.  
  153. .cent
  154.  
  155. == My second page.
  156.  
  157. .end
  158.  
  159. .end
  160.  
  161. .result
  162.  
  163. # Link back to ((Home)). - [[b a good place to start]]
  164.  
  165. # This link goes to the ((Third Page|next)) page. - [[rev still needs some work]]
  166.  
  167. /#
  168.  
  169. .end
  170.  
  171. .end
  172.  
  173. .nav WikiWriter Tutorial: ((tutor08|Prev)) | ((tutor00|Up)) | ((tutor10|Next))
  174.  
  175. .end
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182.